<!DOCTYPE html>
<html>

<head>
    <title>北京站网格化系统</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Fonts -->
    <!-- CSS Libs -->
    <link rel="stylesheet" type="text/css" href="../lib/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/animate.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/bootstrap-switch.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/checkbox3.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/dataTables.bootstrap.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/select2.min.css">
    <!-- CSS App -->
    <link rel="stylesheet" type="text/css" href="../lib/css/common/style.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/common/themes/flat-blue.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/validform.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/common/newstyle.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/baseCommon.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/zc-common.css">
     <!-- Javascript Libs -->
    <script type="text/javascript" src="../lib/js/jquery.min.js"></script>
    <script type="text/javascript" src="../lib/js/common/base.js"></script>
    <script type="text/javascript" src="../lib/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../lib/js/bootstrap-switch.min.js"></script>
    <script type="text/javascript" src="../lib/js/jquery.matchHeight-min.js"></script>
    <script type="text/javascript" src="../lib/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="../lib/js/dataTables.bootstrap.min.js"></script>
    <script type="text/javascript" src="../lib/js/select2.full.min.js"></script>
    <script type="text/javascript" src="../lib/js/datetimepicker.js"></script>
    <script type="text/javascript" src="../lib/js/validform.js"></script>
    <script type="text/javascript" src="../lib/js/depchoice/edep_plugin.js"></script>
    <script type="text/javascript" src="../lib/js/ztreeJs.js"></script>
    <script type="text/javascript" src="../lib/js/vue.js"></script>
    <!-- <script type="text/javascript" src="../lib/js/ace/ace.js"></script>
    <script type="text/javascript" src="../lib/js/ace/mode-html.js"></script>
    <script type="text/javascript" src="../lib/js/ace/theme-github.js"></script> -->
    <!-- Javascript -->
    <script type="text/javascript" src="../lib/js/common/app.js"></script>
    <script type="text/javascript" src="../lib/js/organization.js"></script>
</head>

<body class="flat-blue">
    <div class="app-container expanded">
        <div class="row content-container">
            <nav class="navbar navbar-default navbar-fixed-top navbar-top">
                <div class="container-fluid app-header">
                    <div class="navbar-header">
                        <button type="button" class="navbar-expand-toggle fa-rotate-90">
                        <i class="fa fa-bars icon"></i>
                        </button>
                        <top-nav></top-nav>
                    </div>
                    <right-info></right-info>
                </div>
            </nav>
            <div class="side-menu-wrap">
                <side-menu></side-menu>
            </div>
            <!-- Main Content -->
            <div class="container-fluid">
                <div class="side-body padding-top">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="card card_list">
                                <div class="card-body">
                                    <!-- 表格 -->
                                    <div class="table_style">
                                        <table id="table_id_example"  class="table table-striped table-bordered table-hover" cellspacing="0" width="100%">
                                            <thead>
                                                <tr>
                                                    <th>网格编号</th>
                                                    <th>网格名称</th>
                                                    <th>负责部门</th>
                                                    <th>作业部门</th>
                                                    <th>巡视标准</th>
                                                    <th>操作</th>
                                                </tr>
                                            </thead>
                                            <tbody class="table_body">
                                                <tr>
                                                    <td class="post_table">站1</td>
                                                    <td class="info_table">1站台</td>
                                                    <td class="station_table">客运车间</td>
                                                    <td class="cate_table">运转车间、客运车间、保洁车间</td>
                                                    <td class="people_table">2小时巡视一次</td>
                                                    <td><a href="javascript:void(0)" class="table_editor" onclick="table_editor(this)"style="color: #108EE9;margin-right: 2px;">编辑</a></td>
                                                </tr>
                                            </tbody>
                                    </table>
                                    </div>    
                                </div>
                                
                            </div>
                            <div class="card card_edit">
                                <div class="card-body">
                                    <div class=" base_info">
                                        <p class="base_info_p">网格编辑</p>
                                        <p class="base_info_ps">网格已根据区域划分完毕，需添加或修改各网格的责任部门与作业部门。</p>
                                        <p class="base_info_ps">完整的网格信息有助于网格化管理更顺畅的使用。</p>
                                    </div>
                                    <form class="form-horizontal gridvue ss_form" style="margin-top:30px">
                                        <div class="form-group">
                                            <label for="dep" class="col-sm-2 control-label">网格编号：</label>
                                            <div class="col-sm-10 col-md-6 col-lg-4">
                                                <p class="form-control-static grid_uname">{{info.grid_uname}}</p>
                                                
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="grid_name" class="col-sm-2 control-label">网格名称： </label>
                                            <div class="col-sm-10 col-md-6 col-lg-4">
                                                <input type="text" class="form-control grid_name" id="grid_name" placeholder="请输入网格编号" v-model="info.grid_name" datatype="*" errormsg="网格名称错误" nullmsg="网格名称不能为空">
                                                <span class='Validform_checktip' />
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="managedep" class="col-sm-2 control-label">负责部门： </label>
                                            <div class="col-sm-10 col-md-6 col-lg-4">
                                                <div class="departSelect">
                                                    <input type="text" class="form-control managedep" id="managedep" name="managedep" placeholder="负责部门">
                                                    <input id="managedepid" type="hidden" datatype="ztreegroup" errormsg="负责部门不能为空" nullmsg="负责部门不能为空">
                                                    <div id="managedepgroup" class="groudtree">
                                                
                                                    </div>
                                                    <span class='Validform_checktip' />    
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="workdep" class="col-sm-2 control-label">作业部门： </label>
                                            
                                            <div class="col-sm-10 col-md-6 col-lg-4">
                                                <div class="departSelect">
                                                        
                                                    <div type="text" class="form-control tagselect workdep" id="workdep" name="workdep" placeholder="作业部门"></div>
                                                    <input id="workdepid" type="hidden" datatype="ztreegroup" errormsg="作业部门不能为空" nullmsg="作业部门不能为空">
                                                    <div id="workdepgroup" class="groudtree">
                                                
                                                    </div>
                                                    <span class='Validform_checktip' />    
                                                </div>
                                            </div>
                                        
                                        </div>
                                        <div class="form-group">
                                            <label for="grid_type" class="col-sm-2 control-label">巡视标准： </label>
                                            <div class="col-sm-10 col-md-6 col-lg-4">
                                                <select class="form-control grid_type" name="grid_type" id="grid_type" style="width:100%" datatype="select2" errormsg="请选择巡视标准" nullmsg="请选择巡视标准">
                                                </select>
                                                <span class='Validform_checktip' />   
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="grid_area" class="col-sm-2 control-label">网格标签： </label>
                                            <div class="col-sm-10 col-md-6 col-lg-4">
                                                <select class="form-control grid_area" name="grid_area" id="grid_area" style="width:100%" datatype="select2" errormsg="请选择网格标签" nullmsg="请选择网格标签">
                                                <span class='Validform_checktip' /> 
                                                </select> 
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="col-sm-offset-2 col-sm-10">
                                                <button type="button" class="btn btn-info edited" onclick="uploadData('grid')">保存</button>
                                                <button type="button" class="btn btn-default edit_cancel">取消</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>   
        </div>
        <div class="modal fade" id="modalTips" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel3">提示</h4>
                    </div>
                    <div class="modal-body">
                        温馨提示
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    navData.accNav1 = 'organization'
    navData.nav1Name = '组织管理'
    navData.accNav2 = 'organization-grid'
    navData.accNav3 = '5'
    var navVue = new Vue({
        el:'.side-menu-wrap' 
    })
    var navTopVue = new Vue({
        el:'.app-header' 
    })
    //翻页条件
    var _upData={
        'page':1,
        'count':10
    }
    var _dataTable = $("#table_id_example").DataTable({
        "dom": '<"top"fl<"clear">>rt<"bottom"ip<"clear">>',
        language:{
            url: '../lib/js/cn_lang.json'
        },
        serverSide:true,
        ajax:function(data,callback,settings){
            //console.log('data',data)
            $('.table').loading('open','加载中。。。')
            //console.log(data)
            _upData.page = (data.start / data.length)+1;//当前页码
            _upData.count = data.length;//每页个数
            _upData.w = data.search.value;//搜索
            $.ajax({
                url:serverUrl.base+serverUrl.grid+'grid_list',
                type:"POST",
                data:_upData,
                cache: false,
                dataType:"json",
                success:function(res){
                    if(res.code == 0){
                        // $('.tablepagewrap').html(res.result_page)
                        res.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回
                        res.recordsTotal = res.total;//返回数据全部记录
                        res.recordsFiltered = res.total;//后台不实现过滤功能，每次查询均视作全部结果
                        callback(res)
                    }        
                },
                complete:function(res){
                    $('body').loading('close')
                    $('.table').loading('close')
                },
                error:function(res){
                    
                }    
            })
        },
        // ajax:{
        //     url:serverUrl.base+serverUrl.grid+'grid_list',
        //     data:{
        //         _:Math.random()
        //     },
        //     type:'POST',
        //     complete:function(){
        //         $('body').loading('close')
        //     }
        // },
        ordering:false,
        select:true,
        columns:[
            { "data": "grid_uname",defaultContent:'' },
            { "data": "grid_name",defaultContent:'' },
            { "data": "department_name",defaultContent:'' },
            { "data": "grid_work_department",defaultContent:'' },
            { "data": "grid_type_name",defaultContent:'' },
            {
                "data":null,render:function(data, type, row, meta){
                    return '<a onclick="editing(\'grid\',this)" href="javascript:void(0)">编辑</a>'
                },defaultContent:''
            }
            
        ]  
    })
    var  Info={}
    // 编辑
    function editing(name,elm){
        switch(name){
            case 'grid':
                $('.card_edit').show()
                $('.card_list').hide()
                Info = {
                    grid_id:'',
                    grid_name:'',
                    grid_uname:'',
                    grid_work_department:'',
                    grid_type_id:'',
                    department_id:'',
                    area_id:''
                }
                if(arguments[1]){
                    Info =$.extend({},_dataTable.row($(elm).parents('tr')).data()) 
                    $.post(serverUrl.base+serverUrl.grid+'grid_info',{grid_id:Info.grid_id},function(res){
                        Info = $.extend({},Info,res.data)
                        
                        $('#managedepid').val(Info.department_id)
                        $('#managedep').val(Info.department_name)                        
                        
                        Info._grid_work_department_id = []
                        // Info.grid_work_department=[
                        //     {id:'1',name:'y'},
                        //     {id:'2',name:'ys'},
                        //     {id:'3',name:'ys2'},
                        //     {id:'4',name:'ys3'}
                        // ]
                        tagSelected({data:Info.grid_work_department,elmName:'workdep',delFn:function(elm,id,data){
                            Info.grid_work_department = Info.grid_work_department.filter(function(v){
                                return v.id != id
                            })  
                            Info._grid_work_department_id=[]
                            $.each(Info.grid_work_department,function(val,elm){
                                Info._grid_work_department_id.push(elm.id)
                            })
                            $('#workdepid').val(Info._grid_work_department_id.join(','))
                        }}) //复选树初始化
                        
                        $.each(Info.grid_work_department,function(val,elm){
                            Info._grid_work_department_id.push(elm.id)
                        })
                        $('#workdepid').val(Info._grid_work_department_id.join(','))

                        $('.grid_type').val(Info.grid_type_id).trigger('change');
                        $('.grid_area').val(Info.area_id).trigger('change')
                        gridVue.info = Info
                    },'json')
                }else{
                    gridVue.info = Info
                }
                
                
            break;
            default:
                $('.card_edit').show()
                $('.card_list').hide()
                Info = {}
            break;
        }
        if(arguments[1]){
            Info.row = $(elm).parents('tr')
        }
    }
    var gridVue = new Vue({
        el:'.gridvue',
        data:{
            info:{}
        },
        computed:{
            showUser:function(){
                return this.info.post_type_id != '2'
            }
        },
        methods:{

        },
        watch:{
            
        },
        mounted:function(){

        },
        beforeUpdate:function(){

        },
        updated:function(){
     
        }
    })
    // 保存修改
    function uploadData(name){
        switch(name){
            case 'grid':
                if(!myValidform.check()){
                    return false
                }
                var _info = gridVue.info,
                _upData = {
                    grid_id:_info.grid_id,
                    grid_name:_info.grid_name,
                    grid_uname:_info.grid_uname,
                    grid_work_department:$('#workdepid').val(),
                    department_id:$('#managedepid').val(),
                    grid_type_id:$('select.grid_type').val(),
                    area_id:$('select.grid_area').val()
                }
                $('.card_edit').loading('open')
                $.ajax({
                    url:serverUrl.base+serverUrl.grid+'edit_grid',
                    type:"POST",
                    data:_upData,
                    dataType:"json",
                    success:function(res){
                        if(res.code == 0){
                            _upData.grid_type_name=$('select.grid_type').select2('data')[0].text
                            _upData.department_name=$('#managedep').val()
                            // _upData.grid_work_department=_upData.grid_work_department.split(',').join('，')
                            var _t = $('#workdep').find('.circleGird')
                            _upData._grid_work_department = []
                            _t.each(function(id,elm){
                                _upData._grid_work_department.push($(elm).text())                                
                            })
                            _upData.grid_work_department = _upData._grid_work_department.join('，')
                            //更新表格
                            // _dataTable.settings()[0].ajax.data={'department_id':Info.department_id}
                            _dataTable.ajax.reload(function(){},false)
                            // _dataTable.row(Info.row).data(_upData).draw(false)

                            Info = {}
                            $('.card_edit').hide()
                            $('.card_list').show()
                            $("#modalTips").find('.modal-title').text('成功') 
                            var _info='网格更新成功'
                            $("#modalTips").find('.modal-body').text(_info)
                        }else if(res.code == '2'){
                            $("#modalTips").find('.modal-title').text('出现问题') 
                            $("#modalTips").find('.modal-body').text(res.info)
                        }
                        setTimeout(function(){
                            $("#modalTips").modal()    
                        },500)

                    },
                    complete:function(res){
                        $('#modalDel').modal('hide')
                        $('.card_edit').loading('close')
                    },
                    error:function(res){
                        $("#modalTips").find('.modal-title').text('出现问题') 
                        $("#modalTips").find('.modal-body').text(res.info)
                        setTimeout(function(){
                            $("#modalTips").modal()    
                        },500)
                    }    
                })
            break;
        }
    }
    // 取消
    $(".edit_cancel").on('click',function(){
        $(".card_list").show();
        $(".card_edit").hide();
        Info={}
    })
    $('.managedep').on('click',function(){
        showsDeptWin('managedep','managedepid','3',myValidform);
    })
    $('.workdep').on('click',function(){
        showsDeptWin('workdep','workdepid','2',myValidform);
    })
    //setTimeout(function(){},1000)
    var myValidform = $(".ss_form").Validform({
        tiptype:3,
        datatype:{
            putso:function(gets,obj,curform,regxp){
                /*参数gets是获取到的表单元素值，
				  obj为当前表单元素，
				  curform为当前验证的表单，
				  regxp为内置的一些正则表达式的引用。*/
                var _checkpwrap = obj.parents('.checkpwrap')
                var _type = _checkpwrap.find('.checkp').val()
                var _userid = _checkpwrap.find('.userid').val()
                var _post = _checkpwrap.find('.post').val()
                var reg1=regxp["*"],
					reg2=/[\d]{7}/,
					mobile=curform.find(".mobile");
                if(obj){
                    if(_type == '1'){
                        //人
                        //console.log(_userid)
                        if(reg1.test(_userid)){return true;}
                    }else if(_type == '3'){
                        //岗位
                        if(reg1.test(_post)){return true;}
                    }
                }
                return false;
            },
            ztreegroup:function(gets,obj,curform,regxp){
                if(gets == ''){
                    return false
                }else{
                }
            },
            select2:function(gets,obj,curform,regxp){
                if(gets.length ==0){
                    obj.siblings('.select2').find('.select2-selection').css('borderColor','red')
                    return false
                }else{
                    obj.siblings('.select2').find('.select2-selection').css('borderColor','#ccc')
                }
            }
        }
    });
    new rpSelect({
        sel:'grid_type',
        url:serverUrl.base+serverUrl.grid+'grid_type_list',
        // datas:datas.xsStandard,
        multiple:false
    })
    new rpSelect({
        sel:'grid_area',
        url:serverUrl.base+serverUrl.grid+'area_list',
        // datas:datas.gridTips,
        multiple:false
    })
</script>
</html>
